<template>
    <div>
      <div class="my-wrap">
        <div class="personArea">

          <div class="insideArea" v-if="is_login==1">
            <img :src="data1.head_ico" alt="">
            <div class="message">
              <p class="name">{{data1.user_name}}</p>
              <p class="idValue">ID：{{data1.user_no}}</p>
            </div>
            <div class="signOut">
              <p @click="signOut">退出登录</p>
            </div>
          </div>
          <div class="insideArea" v-else>
            <div class="signIn">
              <p @click="login">请登录</p>
            </div>
          </div>
          <div class="balance" v-if="is_login==1">
            <p>账户余额：<span>￥{{data1.balance}}</span></p>
          </div>
        </div>
        <div class="myOrder">
          <div style="width: 100vw;height: 10.67vw;border-bottom: 1px solid #f5f5f5">
            <p class="myList" style="color: #333;font-size: 15px;">
              我的订单
              <!--to="/myOrder?active=0"-->
              <span style="font-size: 12px;color: #666;">
                <a href="" @click="toList(0)">查看全部订单</a>
             <!-- <img src="../../assets/img/rectang.png" alt=""
                   style="width: 2.06vw;height: 2vw;float: right;position:relative;top: 4.3vw;left: .5vw;">-->
            </span>

            </p>
            <div class="wait" align="center" style="justify-content: center">
              <div class="pay">
                <a href="" @click="toList(1)">
                  <span class="num" v-if="data1.unpay">{{data1.unpay}}</span>
                  <img src="/static/img/Payment@2x.png" alt="">
                  <p>待付款</p>
                </a>
              </div>
              <div class="getGoods">
                <a href="" @click="toList(2)">
                  <span class="num" v-if="data1.unsend">{{data1.unsend}}</span>
                  <img src="/static/img/GoodsReceipt@2x.png" alt="">
                  <p>待发货</p>
                </a>
              </div>
              <div class="receive">
                <a href="" @click="toList(3)">
                  <span class="num" v-if="data1.unaccept">{{data1.unaccept}}</span>
                  <img src="/static/img/DeliverGoods@2x.png" alt="">
                  <p>待收货</p>
                </a>
              </div>
              <div class="comment">
                <a href="" @click="toList(4)">
                  <span class="num" v-if="data1.uncomment">{{data1.uncomment}}</span>
                  <img src="/static/img/evaluate@2x.png" alt="">
                  <p>待评价</p>
                </a>
              </div>
            </div>
          </div>
        </div>
        <div class="functionArea" align="center">
          <router-link @click="dont" to="/enjoy">
            <div>
              <img src="/static/img/ic_xinyuan@2x.png" alt="">
              <p>心愿单</p>
            </div>
          </router-link>
          <router-link @click="dont" to="/myCoupon">
            <div>
              <img src="/static/img/ic_youhuiquan@2x.png" alt="">
              <p>优惠券</p>
            </div>
          </router-link>
          <router-link @click="dont" to="myHistory">
            <div>
              <img src="/static/img/ic_zuji@2x.png" alt="">
              <p>足迹</p>
            </div>
          </router-link>
          <a href="../addressList/main">
            <div>
              <img src="/static/img/ic_shouhuo@2x.png" alt="">
              <p>地址</p>
            </div>
          </a>
          <a  @click="dont" href="">
            <div>
              <img src="/static/img/ic_qianbao@2x.png" alt="">
              <p>钱包</p>
            </div>
          </a>
          <a @click="dont" href="">
            <div>
              <img src="/static/img/ic_bangzhu@2x.png" alt="">
              <p>客服</p>
            </div>
          </a>
        </div>
      </div>

    </div>
</template>
<script>
  import pageFooter from '@/components/common/pageFooter'
  import request from '@/actions/request.js'
    export default {
      name: "mine",
      components:{
        pageFooter
      },
      data(){
        return{
          data1:{},
          is_login:''
        }
      },
      methods:{
        toList(num){
          wx.navigateTo({
            url:'../orderList/main?active='+num
          })
          wx.setStorageSync("orderListAct",num)
        },
        signOut(){
         /* wx.removeStorage({
            key: 'token',
            success: function (res) {
            },
            fail: function (res) {
            }
          })*/
          /*wx.removeStorage({
            key: 'openid',
            success: function (res) {
            },
            fail: function (res) {
            }
          })*/
          wx.showToast({
            title:"退出登录成功",
            icon:'none',
            duration: 1500
          })
          wx.navigateTo({
            url:'../index/main'
          })
        },
        login(){
          const url='/pages/login/main'
          wx.navigateTo({ url })
        },
        dont(){
          wx.showToast({
            title:"该功能暂未开放，敬请期待",
            icon:"none",
            duration:2000
          })
        }
      },
      created(){
    /*    request.mine('api/user/index', 'post', {}, {}, false, this);*/
      },
      onload(){
        request.mine('api/user/index', 'post', {}, {}, false, this);
      },
      onShow(){
        request.mine('api/user/index', 'post', {}, {}, false, this);
      },
      mounted(){
        request.mine('api/user/index', 'post', {}, {}, false, this);
        console.log(this.data1);
      }
    }
</script>

<style scoped lang="scss">
  .my-wrap{
    background: #f5f5f5;
    width: 100vw;
    height: 100vh;
  }
  .personArea{
    width: 100vw;
    height:29.33vw;
    background:#FF3C73;
  .balance{
    width: 92vw;
    height: 13.3vw;
    background:rgba(255,255,255,1);
    box-shadow:0px 4px 16px 0px rgba(255,153,173,0.2);
    border-radius:3.5vw;
    margin: 0px auto;
    position: relative;
    top: -5vw;
  p{
    font-family:PingFang-SC-Regular;
    font-weight:400;
    color:rgba(51,51,51,1);
    line-height:13.3vw;
    text-indent: 8vw;
    font-size: 14px;
  span{
    font-size:16px;
    font-family:PingFang-SC-Heavy;
    font-weight:800;
    color:rgba(255,89,89,1);
    line-height:13.3vw;
  }
  }
  }
  .signOut{
  p{
    // display: inline-block;
    float: right;
    margin-top: 7vw;
    color: #fff;
    font-size: 15px;
  }
  }
  .signIn{
    padding-top: 7vw;
    color: #fff;
    font-size: 15px;
  }
  .insideArea{
    width:92vw;
    height:100%;
    margin: 0px auto;
  .name{
    margin-top: 7vw;
  }
  img{
    width:14.67vw;
    height:14.67vw;
    float: left;
    margin-top: 4.3vw;
  }
  .message{
    float: left;
    margin-left: 3.3vw;
  .name{
    font-size: 16px;
    color: #fff;
  }
  .idValue{
    font-size: 13px;
    color: #fff;
  }
  }
  }
  }
  .myOrder{
    width: 100vw;
    height:27vw ;
    background: #fff;
    margin-top: 12vw;
  .wait{
    width: 100vw;
    height: 17.87vw;
    display: flex;
    text-align: center;
  div{
    flex: 1;
    position: relative;;
  span{
    width:4vw;
    height: 4vw;
    position: absolute;
    border: 1px solid #ff4c50;
    border-radius: 50%;
    display: inline-block;
    color: #ff4c50;
    line-height: 4vw;
    font-weight: 600;
    background: #fff;
    left: 14vw;
    top: 2vw;
    font-size: 10px ;
  }
  p{
    color: #777777;
    font-size: 11px;
    line-height: 7vw;
  }
  img{
    width: 5.3vw;
    height: 5.3vw;
    margin-top: 3vw;
  }
  }
  }
  .myList{
    width: 92vw;
    height:10.67vw ;
    margin: 0px auto;
    background: #fff;
    font-size: 15px;
    color: #333;
    font-family:PingFang-SC-Medium;
    font-weight:500;
    color:rgba(51,51,51,1);
    line-height:10.67vw;
    border-bottom: 1px solid #f5f5f5;
  span{
    float: right;
    margin-right: 1vw;
  }
  }
  }
  .functionArea{
    width: 100vw;
    margin-top: 8vw;
    background: #fff;
    text-align:center;
    a{
      display: inline-block;
    }
    div{
    width: 32vw;
    height: 29.3vw;
    padding-top: 4.2vw;
    display: inline-block;
    border-bottom: 1px solid #f5f5f5;
  p{
    font-size: 13px;
    color: #333;
    line-height: 10vw;
  }
  img{
    width: 13.33vw;
    height:13.33vw;
  }
  }
  }
</style>
